昨天介紹了CAShapeLayer畫圖的方法，今天來介紹一下如何在CAShapLayer加上動畫效果
首先呢 我們要先宣告出我們的 layer 及 path

let lineLayer = CAShapeLayer()
let path = UIBezierPath()

再來是曲線的四個點 分別是起點終點及兩個控制點

let startPoint = CGPoint(x: 100, y: 150)
let controlPoint1 = CGPoint(x: 150, y: 50)
let controlPoint2 = CGPoint(x: 200, y: 250)
let finalPoint = CGPoint(x: 250, y: 150)

然後畫出一個簡單的曲線
並將 strokeColor 設成紅色、 fillColor 設成透明，再給他一個線寬3

path.move(to: startPoint)
path.addCurve(to: finalPoint, controlPoint1: controlPoint1, controlPoint2: controlPoint2)
lineLayer.path = path.cgPath
lineLayer.strokeColor = UIColor.red.cgColor
lineLayer.fillColor = UIColor.clear.cgColor
lineLayer.lineWidth = 3

接下來就是重點了
我們要使用 CABasicAnimation 來做動畫

先建立一個 CABasicAnimation
keyPath 是我們要改變的屬性
strokeEnd 指的是畫筆結束的地方
fromValue 是值開始的地方
toValue 是值結束的地方
duration 是動畫時間

最後再將動畫加入我們的 layer 裡
再將 layer 加入 view 中

let drawAnimation = CABasicAnimation(keyPath: "strokeEnd")
drawAnimation.fromValue = 0
drawAnimation.toValue = 1
drawAnimation.duration = 3

lineLayer.add(drawAnimation, forKey: "drawLine")

self.view.layer.addSublayer(lineLayer)

效果如下

我們再試試加上另一種動畫的方式
先將原本的動畫註解，再加上一下程式

let animation1 = CABasicAnimation(keyPath: "strokeStart")
animation1.fromValue = 0.5
animation1.toValue = 0
animation1.duration = 3

let animation2 = CABasicAnimation(keyPath: "strokeEnd")
animation2.fromValue = 0.5
animation2.toValue = 1.0
animation2.duration = 3

lineLayer.add(animation1, forKey: "ani")
lineLayer.add(animation2, forKey: "ani")

效果如下